<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.phone"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入手机号码" />
      <el-select v-model="listQuery.type" style="width: 200px" clearable class="filter-item" placeholder="请选择类型">
        <el-option v-for="(key,index) in typeList" :key="index" :label="key.name" :value="key.id" />
      </el-select>
      <el-select
        v-model="listQuery.status"
        style="width: 200px"
        clearable
        class="filter-item"
        placeholder="请选择审批状态">
        <el-option v-for="(key,index) in statusList" :key="index" :label="key.name" :value="key.id" />
      </el-select>
      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        style="width: 400px;vertical-align: middle;margin-bottom: 10px;"/>
      <el-button
        v-permission="['user:approval:list']"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter">查找</el-button>
    </div>
    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      size="small"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="id" prop="id" />
      <el-table-column align="center" label="昵称" prop="nickname" />
      <el-table-column align="center" label="手机号" prop="phone" />
      <el-table-column align="center" label="协会名称" prop="associationName" />
      <el-table-column align="center" label="企业名称" prop="enterpriseName" />
      <el-table-column align="center" label="申请时间" prop="gmtCreate">
        <template slot-scope="scope">{{
          scope.row.gmtCreate | formatHmt
        }}</template>
      </el-table-column>
      <el-table-column align="center" label="审批状态" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status == 0?'未通过':scope.row.status == 1 ?'已通过':scope.row.status == 2?'申请中':'' }}
          <div v-if="scope.row.status == 0">
            未通过原因：{{ scope.row.notPassCause }}
          </div>
          <div v-if="scope.row.status == 2">
            <el-button size="mini" type="danger" @click="callBack(scope.row)">打回</el-button>
            <el-button size="mini" type="success" @click="pass(scope.row)">通过</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="类型" prop="type">
        <template slot-scope="scope">
          {{ scope.row.type == 1?'入会':'解除' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="审批人" prop="approver" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList" />

    <!-- 未通过的理由弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="未通过原因" width="400px">
      <el-input :rows="3" v-model="notPassCause" type="textarea" placeholder="请输入内容" style="margin-top: -20px;"/>
      <div slot="footer" class="dialog-footer" style="margin-top: -10px;">
        <el-button @click="cancelBtn">取消</el-button>
        <el-button type="primary" @click="createBtn">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pageApproval, updateApproval } from '@/api/approval'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'Approval',
  components: { Pagination },
  data() {
    return {
      dialogVisible: false,
      date: [],
      notPassCause: '',
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        limit: 20
      },
      formData: {
        dateOfEstablishment: undefined,
        name: undefined,
        phone: undefined,
        legalPerson: undefined,
        contact: undefined,
        address: undefined,
        remark: undefined,
        logoUrl: undefined,
        introduction: undefined,
        businessLicense: undefined
      },
      dialogFormVisible: false,
      statusList: [
        { id: 0, name: '未通过' },
        { id: 1, name: '已通过' },
        { id: 2, name: '申请中' }
      ],
      typeList: [
        { id: 1, name: '入会' },
        { id: 2, name: '解除' }
      ],
      approvalId: '',
      approvalType: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    getList() {
      this.listLoading = true
      
      pageApproval(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          console.log(this.list,545);
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    // 查找方法
    handleFilter() {
      if (this.date) {
        this.listQuery.startTime = this.date[0]
        this.listQuery.endTime = this.date[1]
      }else if(!this.date){
        this.listQuery.startTime = []
        this.listQuery.endTime = []
      }
      this.listQuery.page = 1
      this.getList()
      
    },
    // 审批状态的打回按钮
    callBack(row) {
      this.dialogVisible = true
      this.approvalId = row.id
      this.approvalType = row.type
    },
    // 打回弹出框的取消按钮
    cancelBtn() {
      this.dialogVisible = false
    },
    // 打回弹出框的确定按钮
    createBtn() {
      var changeStatus = 0
      updateApproval(this.approvalId, this.approvalType, changeStatus, this.notPassCause).then(() => {
        this.getList()
      })
      this.dialogVisible = false
      this.notPassCause = ''
    },
    // 审批状态的通过按钮
    pass(row) {
      var changeStatus = 1
      updateApproval(row.id, row.type, changeStatus).then(() => {
        this.getList()
      })
    }
  }
}
</script>
<style lang="scss">
.el-dialog {
    -webkit-box-shadow: none !important;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

